<template>
    <div class="move-div">
        <div class="bread">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item v-for="item, index in pathList" :key="index">
                    <span @click="toFolder(item.id)">{{ item.filename }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="move-table">
            <el-table :data="folderList" style="width: 100%" v-loading="isLoading" element-loading-text="拼命加载中"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" v-if="type == 3">
                </el-table-column>
                <el-table-column label="文件名">
                    <template slot-scope="scope">
                        <div class="folder-item">
                            <MyFileImg :filename="scope.row.fileType" :folder="scope.row.folderType" size="32">
                            </MyFileImg>
                            <div>
                                <el-link :underline="false" @click="openFolder(scope.row)">{{ scope.row.filename
                                }}</el-link>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="dialog-footer">
            <div v-if="file != null" class="text-r">
                <span>操作的文件：</span><el-link>{{ file.filename }}</el-link>
            </div>
            <el-button type="primary" round @click="submit" :loading="isLoading" v-if="type == 1">移动到此文件夹</el-button>
            <el-button type="primary" round @click="submit" :loading="isLoading" v-else-if="type == 2">保存到此文件夹</el-button>
            <el-button type="primary" round @click="submit" :loading="isLoading" v-else-if="type == 3">发送</el-button>
        </div>
    </div>
</template>

<script>
import MyFileImg from "@/components/my-file-img"
export default {
    name: "move-file",
    props: ['file', 't', 'type'],
    components: {
        MyFileImg
    },
    data() {
        return {
            isLoading: false,
            // 面包屑
            pathList: [
                {
                    id: 0,
                    filename: "全部"
                }
            ],
            // 当前文件夹ID
            currId: 0,
            folderList: [],
            isLoading: false,
            // 选中的行
            multipleSelection: []
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            if (this.type == 1 || this.type == 2) this.getFolderList()
            else this.getFileList()
        },
        async getFolderList() {
            this.isLoading = true
            let res = await this.$store.dispatch("getFolderList", {
                pId: this.pathList[this.pathList.length - 1].id
            })
            if (!res.success) this.$global.resError(res)
            else {
                if (this.file == null) this.folderList = res.data
                else {
                    this.folderList = []
                    res.data.forEach(item => {
                        if (item.id != this.file.id) this.folderList.push(item)
                    });
                }
            }
            this.isLoading = false
        },
        async getFileList() {
            this.isLoading = true
            let res = await this.$store.dispatch('getFolderFile', {
                pId: this.pathList[this.pathList.length - 1].id,
                limit: 100,
                page: 1,
                status: 1
            })
            this.isLoading = false
            if (!res.success) this.$global.resError(res)
            else this.folderList = res.data.list
        },
        toFolder(id) {
            if (id == 0) {
                // 若是全部
                this.pathList = [
                    {
                        filename: "全部",
                        id: 0
                    }
                ]
            }
            else {
                let list = [], flag = false
                for (let i = 0; i < this.pathList.length; i++) {
                    if (flag) break
                    if (this.pathList[i].id == id) flag = true
                    list.push(this.pathList[i])
                }
                this.pathList = list
            }
            this.currId = id
            this.init()
        },
        openFolder(item) {
            // 如果是文件夹就打开
            if (item.folderType == 2) {
                this.pathList.push({
                    filename: item.filename,
                    id: item.id
                })
                this.currId = item.id
                this.init()
            }

        },
        submit() {
            if (this.type == 1) {
                // 移动文件
                this.moveTo()
            }
            else if (this.type == 2) {
                // 保存文件
                this.saveCloud()
            }
            else if (this.type == 3) {
                // 发送文件
                this.sendFile()
            }
        },
        async moveTo() {
            if (this.file.id == this.currId) {
                this.$message.warning("不能移动到相同文件夹")
                return
            }
            this.isLoading = true
            let res = await this.$store.dispatch('saveFolder', {
                id: this.file.id,
                parentId: this.currId
            })
            this.isLoading = false
            if (!res.success) this.$global.resError(res)
            else {
                this.$message.success(res.message)
                this.$bus.$emit('refreshFileList')
            }
        },
        async saveCloud() {
            this.isLoading = true
            let res = await this.$store.dispatch('saveFileToMe', {
                userId: this.file.userId,
                fileId: this.file.id,
                saveFileId: this.currId
            })
            this.isLoading = false
            if (res.success) {
                this.$message.success(res.message)
                this.getFolderList()
                this.$bus.$emit("busSpaceInfo")
            }
            else this.$global.resError(res)
        },
        async sendFile() {
            this.$bus.$emit('busChatContentFile', {
                fileList: this.multipleSelection
            })
            this.$message.success("发送文件成功")
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    watch: {
        t: function (newVal, oldVal) {
            this.init()
        },
    }
}
</script>

<style scoped>
.folder-item {
    display: flex;
    align-items: center;
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
}

.bread {
    height: 20px;
}

.move-table {
    height: calc(100% - 70px);
    overflow-y: auto;
}

.move-div {
    height: 400px;
}

.text-r {
    text-align: right;
}
</style>